import React, {Component} from 'react';
import cs from 'classnames'
import BaseCmpt from '../BaseCmpt';
import './index.css';
import {Input, Button} from 'antd';

class MCase extends BaseCmpt {

    static defaultProps = {
        data: {
            type: 10,
            style: {},
            dataset: {
                imgList: []
            }
        }
    };

    constructor(props) {
        super(props);
    }

    render() {
        var {onSelected, selected, data} = this.props;
        var {style, dataset} = data;
        var imgList = dataset.imgList;
        var marginLeft = parseFloat(style.marginLeft || 0);
        // var panelWid = 320 - marginLeft * 2;
        // var smWid = (panelWid - 2) / 3;
        // var bigWid = smWid * 2 + 1;

        var winWidth = 320;
        var gap = 2;
        var panelWid = winWidth - marginLeft * 2;
        var smWid = (panelWid - gap) / 2;
        var smHei = smWid * (263 / 373);
        var bigWid = (panelWid - gap) / 2;
        var bigHei = smHei * 2 + gap;

        return (
            <div
                onClick={(e) => {
                    onSelected && onSelected(e)
                }}
                className={cs({'mCase clearfix cmptEle': true, 'cmptEle_selected': selected})}
                style={{...style, width: panelWid + 'px'}}
            >
                <div className="mCaseItem mCaseItem_big"
                     style={{width: bigWid + 'px', height: bigHei + 'px', marginRight: gap + 'px'}}>
                    <div className="mCaseItem__img"
                         style={{backgroundImage: 'url(' + (imgList[0] && imgList[0]['img'] || 'http://cdn1.taojinzi.com/xcx/mCase/1-2.jpg') + ')'}}></div>
                </div>
                <div className="mCaseItem mCaseItem_sm"
                     style={{width: smWid + 'px', height: smHei + 'px', marginBottom: gap + 'px'}}>
                    <div className="mCaseItem__img"
                         style={{backgroundImage: 'url(' + (imgList[1] && imgList[1]['img'] || 'http://cdn1.taojinzi.com/xcx/mCase/2-2.jpg') + ')'}}></div>
                </div>
                <div className="mCaseItem mCaseItem_sm" style={{width: smWid + 'px', height: smHei + 'px'}}>
                    <div className="mCaseItem__img"
                         style={{backgroundImage: 'url(' + (imgList[2] && imgList[2]['img'] || 'http://cdn1.taojinzi.com/xcx/mCase/3-3.jpg') + ')'}}></div>
                </div>
            </div>
        );
    }
}

export default MCase;
